import React, { Component } from 'react';
import { Card, message, Tabs, Icon } from 'antd';

const TabPane = Tabs.TabPane;

export default class Tab extends Component{

	newTabIndex = 0;

	handleCallback=(key) => {
		message.info('hi, 你选择了页签：' + key);
	}

	handleChange = (activeKey) => {
		this.setState({
			activeKey
		})
	}

	onEdit = (targetKey, action) => {
    this[action](targetKey);
  }
	add = () => {
    const panes = this.state.panes;
    const activeKey = `newTab${this.newTabIndex++}`;
    panes.push({ title: activeKey, content: 'Content of new Tab', key: activeKey });
    this.setState({ panes, activeKey });
  }

  remove = (targetKey) => {
    let activeKey = this.state.activeKey;
    let lastIndex;
    this.state.panes.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const panes = this.state.panes.filter(pane => pane.key !== targetKey);
    if (lastIndex >= 0 && activeKey === targetKey) {
      activeKey = panes[lastIndex].key;
    }
    this.setState({ panes, activeKey });
  }


	componentWillMount() {
		const tabs = [
			{
				title: 'tab 1',
				content: 'tab 111',
				key: '1'
			},{
				title: 'tab 2',
				content: 'tab 222',
				key: '2'
			},
			{
				title: 'tab 3',
				content: 'tab 333',
				key: '3'
			}
		];
		this.setState({
			panes: tabs,
			activeKey: tabs[0].key
		})
	}

	render(){
		return(
			<div>
				<Card title="tab切换页签">
					<Tabs defauleActiveKey="1" onChange={this.handleCallback}>
						<TabPane tab="tab 1" key="1">11111111</TabPane>
						<TabPane tab="tab 2" key="2" disabled>2222222</TabPane>
						<TabPane tab="tab 3" key="3">333333333</TabPane>
						<TabPane tab="tab 4" key="4">444444444</TabPane>
					</Tabs>
				</Card>
				<Card title="带图标的页签">
					<Tabs defauleActiveKey="1" onChange={this.handleCallback}>
						<TabPane tab={<span><Icon type="loading" />tab 1</span>} key="1">11111111</TabPane>
						<TabPane tab={<span><Icon type="edit" />tab 2</span>} key="2">2222222</TabPane>
						<TabPane tab={<span><Icon type="delete" />tab 3</span>} key="3">333333333</TabPane>
						<TabPane tab={<span><Icon type="plus" />tab 4</span>} key="4">444444444</TabPane>
					</Tabs>
				</Card>
				<Card title="动态的添加删除页签">
					<Tabs 
						onChange={this.handleChange}
						activeKey={this.state.activeKey}
						defauleActiveKey="1" 
						onEdit={this.onEdit}
						type="editable-card">
						{
							this.state.panes.map((item) => {
							return <TabPane tab={item.title} key={item.key}>{item.content}</TabPane>
							})
						}
					</Tabs>
				</Card>
			</div>
		);
	}

}